<template>
	<view class="Header-box" @tap="toRouterLink" :class="{xcx: statusBarHeight, common: !statusBarHeight}" :style="{paddingBottom: `${statusBarHeight}px`}">
		<view class="header-fixed-box" :style="{
                background: noBg ? noBg : '',
				height: `${statusBarHeight}px`
            }">
			<view class="header-main-box"  style="height: 40px;">
				<!-- <view v-if="!noLeft" @click="headerLeftClick" class="header-left-box header-operation">
					<image v-if="whiteback" class="header-left-back" mode="widthFix"
						src="../static/index/white.png" />
					<image v-else class="header-left-back" mode="widthFix" src="../static/index/black.png" />
				</view> -->
				<view class="header-title" :style="{color:titlecolor?titlecolor:' #333'}">
					<view class="header-conBox">
						<uni-icons type="search" size="15" color="#999"></uni-icons>
						<view class="textColor">{{ name }}</view>
					</view>
				</view>
				<view @click="headerRightClick" :style="{paddingRight:rightPadding?rightPadding:'',color:rightColor?rightColor:''}" class="header-right-box header-operation">{{ rightText }}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		props: {
			// 右侧文字
			rightText: {
				default: "",
			},
			// 是否有背景色
			noBg: {
				default: false,
			},
			//是否有标题颜色
			titlecolor: {
				default: false,
			},
			//是否有白色左侧箭头
			whiteback: {
				default: true,
			},
			// 是否没有返回
			noLeft: {
				default: false,
			},
			notitle: {
				default: false,
			},
			// 右侧padding
			rightPadding: {
				default: false
			},
			rightColor:{
				default:false
			}
		},
		data() {
			return {
				pageTitle: "",
				// 微信小程序的胶囊的高度
				statusBarHeight: "",
				name:'净水服务'
			};
		},
		beforeMount() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			wx.getSystemInfo({
			    success: res=>{
					console.log(res.statusBarHeight);
					this.statusBarHeight = (res.statusBarHeight + (custom.top - res.statusBarHeight)) * 1.2 + custom.height;
				}
			});
			// #endif
		},
		created() {
			// // 获取当前页面路由标题
			// if (this.notitle) {
			// 	this.pageTitle = this.notitle
			// } else {
			// 	this.pageTitle = this.$Route.style.navigationBarTitleText;
			// }
		},
		methods: {
			headerRightClick() {
				// 组件绑定click事件
				this.$emit("rightClick");
			},
			headerLeftClick() {
				uni.navigateBack({});
				uni.setStorageSync("changeActive", 0)
			},
			toRouterLink(){
				 uni.navigateTo({
				 	url:`/subpkg/goods/goods-newsearch/goods-newsearch?name=${this.name}`
				 })
			},
			// 更换标题
			changeTitle(title) {
				console.log(title);
				this.pageTitle = title;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.Header-box {
		position: relative;
		z-index: 99999;
		background-color: #fff;
		// 常见样式
		&.common {
			padding-bottom: 50rpx;
			// padding-bottom: calc(constant(safe-area-inset-top) + 50rpx);
			// padding-bottom: calc(env(safe-area-inset-top) + 50rpx);
			.header-fixed-box {
				height: 50rpx;
				// height: calc(constant(safe-area-inset-top) + 50rpx);
				// height: calc(env(safe-area-inset-top) + 50rpx);
				.header-main-box {
					// height: calc(50rpx - constant(safe-area-inset-top));
					// height: calc(50rpx - env(safe-area-inset-top));
					height: 50rpx;
				}
			}
		}
		// 小程序样式
		&.xcx {}
		.header-fixed-box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;
			background-color: #fff;
			.header-main-box {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				text-align: center;
				color: white;
				.header-title {
					color: #fff;
					width: 80%;
					height: 100%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: -10px;
					font-size: 32rpx;
				}

				.header-operation {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 15%;
					position: absolute;
					bottom: 0;
					white-space: nowrap;
					color: #333 !important;

					.header-left-back {
						width: 33rpx;
					}

					&.header-left-box {
						left: 0;
					}

					&.header-right-box {
						right: 0;
						width: auto;
					}
				}
			}
		}
	}
</style>